<template>
  <div class="main">
    <div class="main-up">
      <div class="headNav">
        <h2>听书</h2>
        <van-search
          v-model="value"
          shape="round"
          placeholder="请输入搜索关键词"
        />
      </div>
      <div>
        <button
          class="btn"
          :class="{ active: isActiveButton === 'button1' }"
          @click="changeButtonStyle('button1')"
        >
          男生
        </button>
        <button
          class="btn"
          :class="{ active: isActiveButton === 'button2' }"
          @click="changeButtonStyle('button2')"
        >
          女生
        </button>
        <button
          class="btn"
          :class="{ active: isActiveButton === 'button3' }"
          @click="changeButtonStyle('button3')"
        >
          动漫
        </button>
      </div>
      <van-swipe
        class="my-swipe"
        :autoplay="2000"
        indicator-color="white"
        :height="100"
      >
        <van-swipe-item>1</van-swipe-item>
        <van-swipe-item>2</van-swipe-item>
        <van-swipe-item>3</van-swipe-item>
        <van-swipe-item>4</van-swipe-item>
      </van-swipe>
      <van-grid :column-num="5" :border="false">
        <van-grid-item clickable to="/bookMusic/hotListening">
           <van-icon name="service-o" size="32" color="red"/>
          <span class="grid" >热听</span>
        </van-grid-item>
        <van-grid-item clickable to="/bookMusic/finish">
          <van-icon name="completed" size="32" color="red"/>
          <span class="grid">完结</span>
          
        </van-grid-item>
        <van-grid-item clickable >
         <van-icon name="fire-o"  size="32" color="red"/>
          <span class="grid">人气</span>
          
        </van-grid-item>
        <van-grid-item clickable to="/bookMusic/anchor">
       <van-icon name="bullhorn-o" size="32" color="red" />
          <span class="grid">主播</span>
          
        </van-grid-item>
        <van-grid-item clickable >
        <van-icon name="gold-coin-o" size="32" color="red"/>
          <span class="grid">免费</span>
          
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
export default {

  data() {
    components:{}
    return {
      value: "",
      isActiveButton: null,
      props:''
    };
  },
  methods: {
    changeButtonStyle(button) {
      if (this.isActiveButton === button) {
        this.isActiveButton = null; // 点击相同按钮时，恢复默认样式
      } else {
        this.isActiveButton = button; // 点击不同按钮时，改变样式
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.main{
    background-color: #F2F2F2;
    width: 100%;
    height: 100%;
}
.main-up{
    background-color: white;
}
.headNav>h2{
    margin: 10px;
    float: left;
}
.btn{
    margin:10px;
    width: 50px;
    border-radius:10px;
    border:none;
    background-color: white;
    color: #ccc;
}
.active {
  background-color: rgba(43, 178, 131, 1);
  color: white;

 
}
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 100px;
    text-align: center;
    background-color: #39a9ed;
    border-radius:10px;
}
.grid-img{
    margin-top: 10px;
    width: 38px;
    height: 38px;
    z-index: 0;
}
.grid{
    font-size: 14px;
    margin: 5px;
    color:#666
}
.grid-icon{
    width: 17px;
    height: 18px;
}
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 100px;
    text-align: center;
    background-color: #39a9ed;
    border-radius:10px;
}
.grid-img{
    margin-top: 10px;
    width: 38px;
    height: 38px;
    z-index: 0;
}
.grid{
    font-size: 14px;
    margin: 5px;
    color:#666
}
.grid-icon{
    width: 17px;
    height: 18px;
}
.null{
    width: 100%;
    height: 12px;
    background-color: #f2f2f2;
}
.goodbooks{
   width: 100%;
   height: 54px;
}
.goodbooks>h4{
    font-size: 16px;
    font-weight: 400;
    line-height: 54px;
}
.rubbish{
    width: 3px;
    height: 16px;
    background-color: #2bb283;
    float: left;
    margin-top: 19px;
    margin-left: 15px;
    margin-right: 5px;
}
.books{
    width: 100%;
    height: 200px;
    background-color: green;

}
</style>